<template>
  <el-dialog
    :custom-class="customClass"
    :visible.sync="innerVisible"
    :close-on-click-modal="clickModalClose"
    @open="handleDialogOpen"
    @close="handleDialogClose"
    v-bind="$attrs"
  >
    <template slot="title">
      <span class="title-icon" v-if="titleIcon">
        <i :class="titleIcon" v-popover:titleIconPopover></i>
        <el-popover ref="titleIconPopover" placement="bottom" trigger="hover">
          <slot name="title-tip"></slot>
        </el-popover>
      </span>
      <span>{{ title }}</span>
    </template>
    <div class="f-dialog__content" v-loading="contentLoading">
      <slot></slot>
    </div>
    <template slot="footer">
      <el-button
        v-for="button in buttonList"
        :key="button.key"
        :plain="button.plain"
        :type="button.plain ? '' : button.type || 'primary'"
        :loading="button.isLoading"
        :disabled="button.disabled"
        size="medium"
        class="primary"
        @click="handleButtonClick(button)"
        >{{ button.label }}</el-button
      >
    </template>
  </el-dialog>
</template>

<script src="./script.js"></script>
<style src="./style.less" lang="less"></style>
